<template>
  <Tab @goBack="goBack" :tabs="tabs" :current="current">
    <div slot="index">
      <el-card class="box-card" v-loading="cardLoading">
        <el-row>
        <el-radio-group v-model="radio" @change="handleRadioChange">
          <el-radio :label="1">累计</el-radio>
          <el-radio :label="2">今日</el-radio>
          <el-radio :label="3">昨天</el-radio>
          <el-radio :label="4">最近7天</el-radio>
          <el-radio :label="5">最近30天</el-radio>
        </el-radio-group>
        </el-row>

        <el-row>
          <el-col :span="2">&nbsp;</el-col>
          <el-col :span="2">总订单</el-col>
          <el-col :span="2">待付款</el-col>
          <el-col :span="2">待接单</el-col>
          <el-col :span="2">待完成</el-col>
          <el-col :span="2">已完成</el-col>
          <el-col :span="2">已取消</el-col>
        </el-row>
        <el-row>
          <el-col :span="2">总数(笔)</el-col>
          <el-col :span="2">{{statisticsData.total.count||0}}</el-col>
          <el-col :span="2">{{statisticsData.wait.count||0}}</el-col>
          <el-col :span="2">{{statisticsData.pending.count||0}}</el-col>
          <el-col :span="2">{{statisticsData.complete.count||0}}</el-col>
          <el-col :span="2">{{statisticsData.completed.count||0}}</el-col>
          <el-col :span="2">{{statisticsData.canceled.count||0}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="2">总额(元)</el-col>
          <el-col :span="2">{{statisticsData.total.amount|currencyFilter}}</el-col>
          <el-col :span="2">{{statisticsData.wait.amount|currencyFilter}}</el-col>
          <el-col :span="2">{{statisticsData.pending.amount|currencyFilter}}</el-col>
          <el-col :span="2">{{statisticsData.complete.amount|currencyFilter}}</el-col>
          <el-col :span="2">{{statisticsData.completed.amount|currencyFilter}}</el-col>
          <el-col :span="2">{{statisticsData.canceled.amount|currencyFilter}}</el-col>
        </el-row>

       <!-- <ul style="margin-top: 10px;">
          <li></li>
          <li>总订单</li>
          <li>待付款</li>
          <li>待接单</li>
          <li>待完成</li>
          <li>已完成</li>
          <li>已取消</li>
        </ul>
        <ul>
          <li>总数(笔)</li>
          <li>{{statisticsData.total.count||0}}</li>
          <li>{{statisticsData.wait.count||0}}</li>
          <li>{{statisticsData.pending.count||0}}</li>
          <li>{{statisticsData.complete.count||0}}</li>
          <li>{{statisticsData.completed.count||0}}</li>
          <li>{{statisticsData.canceled.count||0}}</li>
        </ul>
        <ul>
          <li>总额(元)</li>
          <li>{{statisticsData.total.amount|currencyFilter}}</li>
          <li>{{statisticsData.wait.amount|currencyFilter}}</li>
          <li>{{statisticsData.pending.amount|currencyFilter}}</li>
          <li>{{statisticsData.complete.amount|currencyFilter}}</li>
          <li>{{statisticsData.completed.amount|currencyFilter}}</li>
          <li>{{statisticsData.canceled.amount|currencyFilter}}</li>
        </ul>-->
      </el-card>

      <el-form :inline="true" label-width="80px" style="margin-top: 20px;">
        <el-form-item label="订单号">
          <el-input
            v-model="queryParams.orderno"
            placeholder="输入订单号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="用户">
          <el-input
            v-model="queryParams.nickname"
            placeholder="昵称/手机号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="美发师">
          <el-input
            v-model="queryParams.stylistName"
            placeholder="昵称/手机号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="门店">
          <el-input
            v-model="queryParams.storename"
            placeholder="昵称/手机号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="状态">
          <el-select @keyup.enter.native="handleQuery" v-model="queryParams.status" placeholder="不限" clearable
                     size="small">
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="类型">
          <el-select @keyup.enter.native="handleQuery" v-model="queryParams.servicemodel" placeholder="不限" clearable
                     size="small">
            <el-option
              v-for="dict in typeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="创建时间">
          <el-date-picker
            v-model="daterange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button type="success"  size="mini" icon="el-icon-excel" @click="handleDownload">
            <svg-icon icon-class="excel"></svg-icon>
            导出
          </el-button>
        </el-form-item>

      </el-form>
      <el-table v-loading="loading" :data="postList" @sort-change="sortChange">
        <el-table-column label="订单编号" align="center" prop="orderno">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="订单编号" width="250" trigger="hover">
              <div>{{scope.row.orderno}}</div>
              <span slot="reference">{{ scope.row.orderno.substr(0,10)+'...' }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createtime" width="150" sortable="custom"/>
        <el-table-column label="用户" align="center" prop="nickname" :show-tooltip-when-overflow="true"/>
        <el-table-column label="美发师" align="center" prop="stylistName" :show-tooltip-when-overflow="true"/>
        <el-table-column label="商户" align="center" prop="storename" :show-tooltip-when-overflow="true"/>
        <el-table-column label="类型" align="center" prop="servicemodel">
          <template slot-scope="scope">
            <span v-if="scope.row.servicemodel===1">普通订单</span>
            <span class="text-success" v-else-if="scope.row.servicemodel===2">单项套餐</span>
            <span class="text-navy" v-else-if="scope.row.servicemodel===3">多项套餐</span>
            <span class="text-info" v-else-if="scope.row.servicemodel===4">活动订单</span>
          </template>
        </el-table-column>
        <el-table-column label="订单名称" align="center" prop="ordername" :show-tooltip-when-overflow="true"/>
        <el-table-column label="订单金额" align="center" prop="orderamount">
          <template slot-scope="scope">
            <span>{{scope.row.orderamount|currencyFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column label="优惠券" align="center" prop="couponamount">
          <template slot-scope="scope">
            <span v-if="scope.row.coupontype===1">{{scope.row.couponamount|currencyFilter}}</span>
            <span v-else-if="scope.row.coupontype===2">{{parseFloat(scope.row.couponamount)}}折</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column label="平台补贴" align="center" prop="cashPayAmount">
          <template slot-scope="scope">
            <span
              v-if="!scope.row.cashPayAmount&&scope.row.coupontype===3">{{scope.row.couponamount|currencyFilter}}</span>
            <span v-else>{{scope.row.cashPayAmount|currencyFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column label="实付" align="center" prop="payamount">
          <template slot-scope="scope">
            <span>{{scope.row.payamount|currencyFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center" prop="status" :formatter="typeFormat"
                         :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-link type="primary" @click="handleCurrent('detail',scope.row)">查看详情</el-link>
              <el-link type="primary" @click="verification(scope.row.id)"
                       v-if="scope.row.status===4||scope.row.status===6">核销
              </el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div slot="detail">
      <Detail :order="order"></Detail>
    </div>
  </Tab>

</template>

<script>
  import Tab from "@/components/Tab";
  import Detail from "./detail";
  import {index, statistics, verification as verificationMethod,excelList} from "@/api/main/order/index";

  export default {
    components: {Tab, Detail},
    data() {
      return {
        order: undefined,
        radio: 1,
        total: 0,
        daterange: undefined,
        loading: false,
        cardLoading: false,
        postList: [],
        statusOptions: [],
        type: '',
        typeOptions: [{dictLabel: '普通订单', dictValue: 1}, {dictLabel: '单项套餐', dictValue: 2}, {
          dictLabel: '多项套餐',
          dictValue: 3
        }, {dictLabel: '活动订单', dictValue: 4}],
        current: 'index',
        tabs: [
          {index: 'index', name: ''}, {'index': 'detail', name: '订单详情'}
        ],
        statisticsData: {
          total: {amount: 0, count: 0},
          wait: {amount: 0, count: 0},
          pending: {amount: 0, count: 0},
          complete: {amount: 0, count: 0},
          completed: {amount: 0, count: 0},
          canceled: {amount: 0, count: 0}
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderByColumn: 'T1.createtime DESC',
          orderno: undefined,
          status: undefined,
          stylistName: undefined,
          storename: undefined,
          servicemodel: undefined,
          nickname:undefined
        }
      }
    },
    created() {
      this.getDicts("yy_order_status").then(response => {
        this.statusOptions = response.data;
      });
      this.radioList();
      this.getList();
    },
    methods: {
      handleDownload(){
        let _this=this;
        this.$confirm('确定要导出excel(请先确认点击搜索按条件导出)?', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info"
        }).then(function() {
          const loading = _this.$loading({
            lock: true,
            text: '下载中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          });
          import('@/utils/excel').then(excel => {
            const tHeader = ['订单编号', '创建时间', '用户', '预约美发师', '商户','类型','订单金额','优惠券','平台补贴','实付','状态','订单名称'];
            const filterVal = ['orderno', 'createtime', 'nickname', 'stylistName', 'storename','servicemodel','orderamount','couponamount','cashPayAmount','payamount','status','ordername'];
            let query =  {
              startTime:_this.queryParams.startTime,
              endTime:_this.queryParams.endTime,
              orderno:_this.queryParams.orderno,
              status: _this.queryParams.status,
              stylistName: _this.queryParams.stylistName,
              storename: _this.queryParams.storename,
              servicemodel: _this.queryParams.servicemodel,
              nickname: _this.queryParams.nickname,
              orderByParam: _this.queryParams.orderByColumn
            };
            excelList(query).then(response => {
              const data = _this.formatJson(filterVal,  response.rows);
              excel.export_json_to_excel({
                header: tHeader,
                data,
                filename: '订单列表',
                autoWidth: _this.autoWidth
              });
              loading.close();
            });
          });
        }).catch(function(e) {
          console.log(e);
        });
      },
      formatJson(filterVal, list) {
        return list.map(v => filterVal.map(j => {
          if (j === 'servicemodel') {
            return this.typeFormat(v,{property:'servicemodel'});
          }else if(j==='status'){
            return this.typeFormat(v,{property:'status'});
          }else if(j==='couponamount'){
            if(v['coupontype']===1){
              return v[j];
            }else if(v['coupontype']===2){
              return v[j]+'折';
            }else{
              return  0;
            }
          }
            return v[j];
        }))
      },
      verification(id) {
        let _this=this;
        this.$confirm('确定要进行核销?', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info"
        }).then(function () {
          verificationMethod(id).then(response => {
            console.log(response);
            _this.msgSuccess("核销成功");
            _this.getList();
          });
        }).catch(function (e) {
          console.log(e);
        });

      },
      handleRadioChange() {
        this.radioList();
      },
      radioList() {
        this.cardLoading = true;
        statistics({type: this.radio}).then(response => {
          this.cardLoading = false;
          this.statisticsData = response.data;
        });
      },
      handleCurrent(str, data) {
        this.order = data;
        this.current = str;
      },
      goBack(message) {
        this.current = 'index';
      },
      sortChange(params) {
        if (params.prop === 'createtime') {
          let createtime = 'T1.createtime';
          if (params.order === 'ascending') {
            this.queryParams.orderByColumn = createtime + ' ASC';
          } else {
            this.queryParams.orderByColumn = createtime + ' DESC';
          }
        }
        this.getList();
      },
      handleQuery() {
        if (this.daterange) {
          this.queryParams.startTime = this.daterange[0] + " 00:00:00";
          this.queryParams.endTime = this.daterange[1] + " 23:59:59";
        } else {
          this.queryParams.startTime = null;
          this.queryParams.endTime = null;
        }
        this.queryParams.pageNum = 1;
        this.getList();
      },
      typeFormat(row, column) {
        let option;
        if (column.property === 'status') {
          option = this.statusOptions;
        }else if(column.property === 'servicemodel'){
          option = this.typeOptions;
        }
        return this.selectDictLabel(option, row[column.property]);
      },
      getList() {
        this.loading = true;
        index(this.queryParams).then(response => {
          this.postList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }
    }
  }
</script>

<style scoped>
/*  .box-card ul {
    margin: 0;
    padding: 0 0 0 0;
  }

  .box-card ul li {
    display: inline-block;
    font-size: 14px;
    padding: 5px;
    width: 150px;

  }

  .box-card li:first-child {
    width: 80px;
    text-align: center;
  }*/
  .box-card .el-row{
    margin: 10px 0;
    font-size: 14px
  }
</style>
